<template>
	<view>
		<navBarView></navBarView>
		<navBar navBarTitle="师资列表" bg="#f0f2f5" @rightIconChange="openPopup"></navBar>

		<view class="tab-block">
			<scroll-view :scroll-x="true" class="left-tab-option">
				<view class="tab-item" @click="tabItemClick(item.id, index)" v-for="(item, index) in lst" :key="index">
					<!-- {{ item.id }} -->
					<view class="item-option">
						<view class="item-txt" :class="index == tabIndexCurrent ? 'check-item' : 'no-check-item'">
							{{ item.name }}
						</view>
						<view class="item-border-bottom" v-if="index == tabIndexCurrent"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content-block">
			<view
				class="item-option"
				@click="navGo('/pages/teachers/detail', item)"
				v-for="(item, index) in teacherLst"
			>
				<!-- {{ item }} -->
				<image :src="item.img" class="left-img" @click="openPopup"></image>
				<view class="right-block">
					<view class="txt-option">{{ item.name }}</view>
					<view class="txt-tag-s">{{ item.synopsis }}</view>
					<view class="txt-detial">查看详情</view>
				</view>
			</view>
		</view>
		<view class="fixed-right-block">
			<view class="fixed-icon yuyin" @click="openPopup">
				<image src="@/static/index/yuyin.png" class="img-icon"></image>
				<view class="txt-option">通话</view>
			</view>
			<view class="fixed-icon message" style="margin-top: 32rpx" @click="openPopup">
				<image src="@/static/index/message.png" class="img-icon"></image>
				<view class="txt-option">咨询</view>
			</view>
		</view>
		<sumitPopup ref="submitPopupRef" :classifyArr="courseLst" @submitPopupChange="submitPopupChange"></sumitPopup>
	</view>
</template>

<script>
import navBarView from '../../components/navBarView/navBarView.vue';
export default {
	components: {
		navBarView
	},
	data() {
		return {
			tabIndexCurrent: 0,
			lst: [],
			teacherLst: [],
			courseLst: []
		};
	},
	onLoad() {
		this.initSelectIndex();
	},
	onShow() {
		this.courseLst = uni.getStorageSync('courseLst');
	},
	methods: {
		submitPopupChange(data) {
			uni.showLoading({
				title: '提交中'
			});
			this.$http('common.addSubmit', {
				...data,
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				if (res.code == 200) {
					this.$tools.showMsg('提交成功');
					uni.hideLoading();
					this.$refs.submitPopupRef.clearParam();
					this.$refs.submitPopupRef.closePopup();
					console.log('res======>', res);
				}
			});
		},
		openPopup() {
			this.$refs.submitPopupRef.openPopup();
		},
		initSelectIndex() {
			this.$http('common.selectTeacherType', {
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				if (res.code == 200) {
					// console.log(res.data.data);
					this.lst = res.data.data;
					this.tabItemClick(this.lst[0].id, 0);
				}
			});
			// this.$http('common.selectTeacherByTypeId', {
			// 	typeId: id
			// }).then((res) => {
			// 	if (res.code == 200) {
			// 		console.log(res.data.data);
			// 		this.lst = res.data.data;
			// 		this.tabItemClick(this.lst[0].id, 0);
			// 	}
			// });
		},
		// tabItemClick(id, index) {
		// 	this.teacherLst = [];
		// 	this.tabIndexCurrent = index;
		// 	this.$http('common.selectTeacher', {
		// 		adminId: uni.getStorageSync('adminId')
		// 	}).then((res) => {
		// 		if (res.code == 200) {
		// 			res.data.data.forEach((item) => {
		// 				if ((item.typeId = id)) {
		// 					this.teacherLst.push(item);
		// 				}
		// 			});
		// 		}
		// 	});
		// },
		tabItemClick(typeId, index) {
			this.teacherLst = [];
			this.tabIndexCurrent = index;
			this.$http('common.selectTeacherByTypeId', {
				typeId: typeId,
				adminId: uni.getStorageSync('adminId')
			}).then((res) => {
				if (res.code == 200) {
					res.data.data.forEach((item) => {
						if ((item.typeId = typeId)) {
							this.teacherLst.push(item);
						}
					});
				}
			});
		},
		navGo(url, item) {
			uni.setStorageSync('teacherItem', item);
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style>
page {
	background: #f4f6f8;
}
</style>
<style lang="scss">
.tab-block {
	background: #f0f2f5;
	height: 88rpx;
	display: flex;
	align-items: center;
	padding-top: 16rpx;
	padding-left: 34rpx;
	padding-right: 34rpx;
	padding-bottom: 14rpx;
	position: sticky;
	top: 100rpx;
	z-index: 999;
	.left-tab-option {
		white-space: nowrap;
		// width: 534rpx;
		width: 100%;
		// flex: auto;
		// display: flex;
		// align-items: center;
		height: 88rpx;
		// margin-right: 12rpx;

		.tab-item {
			height: 88rpx;
			font-size: 28rpx;
			position: relative;
			display: inline-flex;

			.item-option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-right: 82rpx;
			}

			.item-txt {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.item-border-bottom {
				position: absolute;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				border-radius: 6rpx;
				background: #209e9a;
			}
		}

		.no-check-item {
			font-size: 32rpx;
			color: #2f2525;
		}

		.check-item {
			font-weight: bold;
			font-size: 32rpx;
			color: #2f2525;
		}
	}

	.right-option {
		// flex: none;
		display: flex;
		align-items: center;
		margin-right: 24rpx;

		.icon {
			width: 24rpx;
			height: 24rpx;
		}

		.txt {
			color: #999999;
			padding-left: 10rpx;
			font-size: 24rpx;
		}
	}
}

.content-block {
	margin: 32rpx;

	.item-option {
		padding: 32rpx 30rpx;
		background: #fff;
		border-radius: 24rpx;
		display: flex;
		align-items: flex-start;
		margin-bottom: 32rpx;

		.left-img {
			width: 240rpx;
			height: 240rpx;
			background: skyblue;
			border-radius: 16rpx;
			flex: none;
		}

		.right-block {
			margin-left: 32rpx;
			flex: auto;

			.txt-option {
				font-weight: 500;
				font-size: 32rpx;
				color: #2f2525;
				line-height: 1.5em;
			}

			.txt-tag-s {
				margin-top: 16rpx;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 1.5em;
				color: #999999;

				display: -webkit-box;
				/* 必须指定display属性 */
				overflow: hidden;
				/* 必须指定overflow属性 */
				text-overflow: ellipsis;
				/* 每行的高度 */
				// max-height: 3em;
				/* 最大高度（根据需求调整）*/
				-webkit-line-clamp: 2;
				/* 最多显示的行数 */
				-webkit-box-orient: vertical;
				/* 必须指定box-orient属性 */
			}

			.txt-detial {
				margin-top: 32rpx;
				width: 148rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				background: #2ca39f;
				border-radius: 40rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}
}

.fixed-right-block {
	position: fixed;
	bottom: 90rpx;
	right: 32rpx;
	z-index: 999;

	.fixed-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 88rpx;
		height: 88rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(255, 127, 23, 0.4);
		border-radius: 50%;
	}

	.txt-option {
		font-size: 20rpx;
		color: #ffffff;
		transform: scale(0.7);
	}

	.yuyin {
		background: #ff7f17;

		.img-icon {
			width: 32rpx;
			height: 46rpx;
		}
	}

	.message {
		background: #3e6bef;

		.img-icon {
			width: 34rpx;
			height: 34rpx;
		}
	}
}
</style>
